<template>
  <div class="news">
    <div class="news-bg">
      <div class="mask bounceInRight animated">
        <div class="mask_cn">嗨！这里是新闻中心</div>
      </div>
      <img src="@/assets/images/news.png" alt="" />
    </div>
    <div class="tabs-box">
      <div class="tabs-content">
        <div
          class="tabs-item"
          v-for="(item, index) in state.tabsAll"
          :class="{ active: state.active === index }"
          @click="handleClick(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="list-content">
      <list :newsList="newsList" />
      <div class="pagination flex justify-content-end">
        <el-pagination
          :current="currentPage"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { TabsPaneContext } from 'element-plus'
import List from './components/list.vue'
import { $http } from '@/service/request/index'

const route = useRoute()
const state = reactive({
  active: 0,
  tabsAll: ['行业动态', '公司新闻']
})
const newsList = ref([])
const currentPage = ref(1)
const total = ref(0)
const pageData = reactive({
  pageIndex: 1,
  pageSize: 10
})
watch(route, (newVal, oldVal) => {
  const active = route.query.id === '2' ? 0 : 1
  handleClick(active)
})
const init = async () => {

  const { data } = (await $http('queryNewsList', {
    channelId: state.active === 0 ? 2 : 8,
    ...pageData
  })) as any
  newsList.value = data
  total.value = data.length
}

const handleCurrentChange = (val: number) => {
  pageData.pageIndex = Number(val)
  init()
}
// const resetParams = () => {
//   currentPage.value = 1
// }
const handleClick = (tab) => {
  state.active = tab
  handleCurrentChange(1)
}
onMounted(() => {
  const id = route.query.id
  if (id) {
    state.active = id === '2' ? 0 : 1
  }
  init()
})
</script>

<style lang="scss" scoped>
@import './styles/common.scss';
@import './styles/web.scss';
@import './styles/phone.scss';
</style>
